<!-- 部门基本信息 -->
<template>
<div class="depart-detail-wp com-main">
  <div v-if="!currentDepart" class="empty">请先选择一个部门!</div>
  <el-form v-else class="item-mb30" ref="form" :model="form" :rules="rules" label-width="7em" label-position="right" size="medium">
    <el-form-item label="部门名称：" prop="departName">
      <el-input v-model="form.departName" placeholder="请输入部门名称"></el-input>
    </el-form-item>
    <el-form-item label="上级部门：" prop="parentName">
      <el-input v-model="form.parentName" readonly placeholder="请输入上级部门"></el-input>
    </el-form-item>
    <el-form-item label="机构类型" prop="orgType">
      <el-select class="pw-100" v-model="form.orgType" placeholder="请选择机构类型">
        <el-option v-for="item in $store.state.dict.orgType" :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="部门等级" prop="departLevel">
      <el-select class="pw-100" v-model="form.departLevel" placeholder="请选择部门等级">
        <el-option v-for="item in $store.state.dict.departLevel" :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="排序：" prop="departOrder">
      <el-input-number v-model="form.departOrder" controls-position="right" :min="1"></el-input-number>
    </el-form-item>
    <el-form-item label="手机号：" prop="mobile">
      <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
    </el-form-item>
    <el-form-item label="地址：" prop="address">
      <el-input v-model="form.address" placeholder="请输入地址"></el-input>
    </el-form-item>
    <el-form-item label="备注：" prop="memo">
      <el-input v-model="form.memo" type="textarea" rows="5" placeholder="请输入备注"></el-input>
    </el-form-item>
    <div class="text-center">
      <el-button size="small" icon="el-icon-refresh" @click="initForm()">重置</el-button>
      <el-button type="primary" size="small" icon="el-icon-edit-outline" :loading="btnLoading" @click="submit()">修改并保存</el-button>
    </div>
  </el-form>
</div>
</template>
<script>

import {regex} from "@/utils/regexp.js";
import {depart} from "@/config/api.js";

export default {
  name: 'depart-detail',
  data () {
    return {
      btnLoading: false,

      form: {
        departName: '', // 部门名称
        parentId: '', // 上级部门
        parentName: '', // 上级部门名
        orgType: '', // 机构类型
        departLevel: '', // 部门等级
        departOrder: '', // 排序
        mobile: '', // 手机号
        address: '', // 地址
        memo: '', // 备注
      },

      // 验证
      rules: {
        departName: [
          { required: true, message: "请输入部门名称", trigger: "blur" },
        ],
        orgType: [
          { required: true, message: "请选择机构类型", trigger: "blur" },
        ],
        departLevel: [
          { required: true, message: "请选择部门等级", trigger: "blur" },
        ],
        mobile: [
          { pattern: regex.mobile, message: "请输入正确的手机号码", trigger: "blur" }
        ],
      }

    }
  },
  props: {
    // 当前选中的部门
    currentDepart: {
      default () {
        return null;
      }
    }
  },
  watch: {
    currentDepart () {
      this.initForm();
    }
  },
  methods: {
    submit () {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return;
        }
        var param = this.$g.copy(this.form);
        param.id = this.currentDepart.id;
        
        this.btnLoading = true;
        this.$put(depart.edit, param).then(res => {
          this.btnLoading = false;
          if (res.success) {
            this.$message.success(res.message);
            this.$emit('reload');
          }
        }).catch(() => {
          this.btnLoading = false;
        })
      })
    },

    initForm () {
      var newData = this.currentDepart;
      for (var key in this.form) {
        if (key == 'parentId') {
          this.form[key] = newData.id;
        } else if (key == 'parentName') {
          this.form[key] = newData.departName;
        } else if (key == 'orgType') {
          this.form[key] = Number(newData.orgType);
        } else {
          this.form[key] = newData[key];
        }
      }
    }

  }
}
</script>
<style lang="scss" scoped>
.depart-detail-wp {
  padding: 25px;
  .empty {
    font-size: 16px;
  }  
}
</style>